<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>商品详情-九果十代</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../dist/styles/app.css"/>
    <style>
        .ui-grid-halve-img{padding-top: 100%;}
        .ui-grid-halve h4{padding: 5px 0;}
        .ui-grid-halve li{text-align: center;}
        .ui-border-b{border: none;background: none;}
        .ui-constom-block img{width: 100%;}
        .ui-slider{padding-top: 41%;}
    </style>
</head>
<body>

<div class="ui-slider">
    <ul class="ui-slider-content" style="width: 300%">
        <li><img src="http://placehold.sinaapp.com/?640*300" alt=""/></li>
        <li><img src="http://placehold.sinaapp.com/?640*300" alt=""/></li>
        <li><img src="http://placehold.sinaapp.com/?640*300" alt=""/></li>
    </ul>
</div>


<section class="ui-constom-block">
    <a href="#"><img src="http://placehold.sinaapp.com//?640*200" alt=""/></a>
</section>

<section class="ui-constom-block">
    <ul class="ui-grid-halve ui-border-b">
        <li data-url="#">
            <div class="ui-grid-halve-img">
                <span style="background-image:url(http://placehold.sinaapp.com//?190*190)"></span>
            </div>
            <h4>商品名称商品名称</h4>
            <button class="ui-btn-s ui-btn-progress">立刻购买</button>
        </li>
        <li data-url="#">
            <div class="ui-grid-halve-img">
                <span style="background-image:url(http://placehold.sinaapp.com//?190*190)"></span>
            </div>
            <h4>商品名称商品名称</h4>
            <button class="ui-btn-s ui-btn-progress">立刻购买</button>
        </li>
        <li data-url="#">
            <div class="ui-grid-halve-img">
                <span style="background-image:url(http://placehold.sinaapp.com//?190*190)"></span>
            </div>
            <h4>商品名称商品名称</h4>
            <button class="ui-btn-s ui-btn-progress">立刻购买</button>
        </li>
        <li data-url="#">
            <div class="ui-grid-halve-img">
                <span style="background-image:url(http://placehold.sinaapp.com//?190*190)"></span>
            </div>
            <h4>商品名称商品名称</h4>
            <button class="ui-btn-s ui-btn-progress">立刻购买</button>
        </li>
    </ul>
</section>

<script src="../../dist/js/lib/sea.js"></script>
<script>
    seajs.config({
        alias:{
            'zepto'     : '../../dist/js/lib/zepto.js',
            'frozen'    : '../../dist/js/lib/frozen.js',
            'handlebars': '../../dist/js/handlebars-v3.0.1.js'
        }
    });
    seajs.use(['zepto', 'frozen'],function(){
        var slider = new fz.Scroll('.ui-slider', {
            role: 'slider',
            indicator: true,
            autoplay: true,
            interval: 5000
        });
    });
</script>
</body>
</html>